<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
    <title>HTML5测试</title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        body{
            /*width:100%;*/
            /*overflow: hidden;*/
        }
        img{
            /*width:100%;*/
        }
        #img01{
            width:200%;
            height:auto;
            color:green;
            border:2px solid red;
        }
        #img01>div{width:50%}
        #img02>div{width:50%}
        #img02{
            width:200%;
            height:auto;
            color:green;
            border:2px solid black;
        }
        #divADBox{
            width:100%;
        }
    </style>
    <script type="text/javascript">
        var allavawidth=parseInt(window.screen.availWidth);
        var avawidth=parseInt(parseInt(window.screen.availWidth)/4);
        console.log(avawidth);
        $(function() {
            var startX, startY, endX, endY;
            var showADID = 1;
            document.getElementById("divADBox").addEventListener("touchstart", touchStart, false);
            document.getElementById("divADBox").addEventListener("touchmove", touchMove, false);
            document.getElementById("divADBox").addEventListener("touchend", touchEnd, false);
            function touchStart(event) {
                var touch = event.touches[0];
                console.log(touch);
                startY = touch.pageY;
                startX = touch.pageX;
            }
            function touchMove(event) {
                var touch = event.touches[0];
                //endY = (startY - touch.pageY);
                endX = touch.pageX;
            }
            function touchEnd(event) {
//                $("#img0" + showADID).hide();
                $("#img01").hide();
                showADID++;
                console.log(showADID);
                if (showADID > 4) {
                    showADID = 1;
                }
                if ((startX - endX) > 5) {
//                    $("#img0"+showADID).show();
                    $("#img01").show();
                }
                $("#spText").html("X轴移动大小：" + (startX - endX));
                $("body").scrollLeft(-allavawidth);
            }
        })
    </script>
</head>
<body >
<form id="form1">
    <div style="border:solid 1px blue;" id="divADBox">
        <span id="spText">X轴移动大小：0</span>
        <div id="img01">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa cupiditate deleniti eos excepturi, fugit illo ipsa laudantium obcaecati optio quo reiciendis repellat tempora totam vitae voluptatem, voluptatibus. Delectus, deleniti!
            </div>
        </div>
        <div id="img02" style="display:none;">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, in, recusandae. Dolore doloremque, esse excepturi fuga hic incidunt iste modi molestiae molestias natus nihil nobis optio sapiente tempora unde voluptate?
            </div>
        </div>
        <!--<div id="img03"></div>-->
        <!--<div id="img04"></div>-->
        <!--<img id="img01" src="img/3241.png"  />-->
        <!--<img id="img02" src="img/3242.png" style="display:none;" />-->
        <!--<img id="img03" src="img/3243.png" style="display:none;" />-->
        <!--<img id="img04" src="img/3244.png" style="display:none;" />-->
    </div>
</form>
</body>
</html>